<template>
  <!-- 这是首页————找医生————专家问诊 -->
  <div class="HomeDoctor">
    <!-- 头部区域 -->
    <van-nav-bar
    class="van-navs"
      title="专家问诊"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>

    <!-- 搜索区域 -->
    <van-search
    class="van-searchs"
      v-model="value"
      placeholder="搜索科室、医生、疾病"
      shape="round"
      @click="goTosearch"
    />

    <main>
       <!-- 科室导航区域 -->
    <p class="doctor">按科室找医生</p>
    <van-grid :column-num="5">
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/内分泌@2x.png')"
        text="内分泌"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/泌尿外科@2x.png')"
        text="泌尿外科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/妇科@2x.png')"
        text="妇科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/消化内科@2x.png')"
        text="消化内科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/老年病@2x.png')"
        text="老年病"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/口腔科@2x.png')"
        text="口腔科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/皮肤科@2x.png')"
        text="皮肤科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/儿科@2x.png')"
        text="儿科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/耳鼻喉科@2x.png')"
        text="耳鼻吼科"
      />
      <van-grid-item
        :icon="require('../assets/images/home1_doctor_slices/更多科室@2x.png')"
        text="更多科室"
      />
    </van-grid>

    <!-- 名医推荐的渲染部分 -->
    <h3 class="famous">名医推荐</h3>
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
      ><ul>
        <li v-for="item in docterlist" :key="item">
          <img :src="item.imgUrl" alt="" />
          <div class="text">
            <div class="text1">
              <span class="name">{{ item.ming }}</span>
              <span class="spanPosition">{{ item.rank }}</span>
            </div>
            <div class="text1">
              <p class="address">
                {{ item.hospital }}
                <span class="department">{{ item.office }}</span>
              </p>
            </div>
            <p class="good">
              {{ item.good }}
            </p>
            <div class="text3">
              <p class="price">{{ item.price }}</p>
              <span class="ask">问医生</span>
            </div>
          </div>
        </li>
      </ul>
    </van-list>
    </main>
   
  </div>
</template>
<script>
import { getdocterlist } from "../utils/api";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
export default {
  setup() {
    const value = ref("");
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const docterlist = reactive([]);
    // let str = ref("");
    // let resList = reactive({
    //   arr: [],
    // });
    const goTosearch = () => {
      router.push("/homesearch");
    };
    const state = reactive({
      loading: false,
      finished: false,
    });

    const onLoad = async () => {
      const res = await getdocterlist({
        token: sessionStorage.getItem("token"),
      });
      state.finished = true;
      docterlist.push(...res.result);
    };
    // const getdate = async () => {
    //   const res = await getdocterlist({
    //     curr: curr.value,
    //     pagesize: 4,
    //   });
    //   if (res.result.length === 0) {
    //     state.finished = true;
    //   } else {
    //     resList.arr = resList.arr.concat(res.result);
    //     state.loading = false;
    //   }
    //   str.value = res.prefix;
    // };
    // const state = reactive({
    //   list: [],
    //   loading: false,
    //   finished: false,
    // });
    // const onLoad = () => {
    //   // 异步更新数据
    //   setTimeout(() => {
    //     getdate();
    //     curr.value++;
    //   }, 1000);
    // };
    return {
      goTosearch,
      value,
      onClickLeft,
      docterlist,
      state,
      onLoad,
      // list,
    };
  },
};
</script>
<style lang="less" scoped>
.van-navs {
  position: fixed;
  width: 100%;
  z-index: 10;
}
.van-searchs {
  position: fixed;
  top: 46px;
  left :0;
  z-index: 10;
  width: 100%;

}
main{
  padding-top: 100px;
}
.doctor,
.famous {
  margin-left: 20px;
  width: 100px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: start;
}
.famous {
  font-size: 14px;
  height: 60px;
  line-height: 60px;
}
li {
  width: 100%;
  height: 140px;
  border-bottom: 2px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  img {
    width: 55px;
    height: 55px;
    margin-top: 5px;
  }
  .text {
    width: 270px;
    height: 100%;
    margin-top: 5px;
    .text1 {
      width: 180px;
      height: 30px;
      text-align: start;
      line-height: 15px;
    }
    .name {
      font-size: 18px;
    }
    .spanPosition {
      margin-left: 10px;
      font-size: 16px;
    }
    .address {
      width: 240px;
      height: 30px;
      font-size: 12px;
      line-height: 20px;
      text-align: start;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .department {
      margin-left: 10px;
    }
    .good {
      width: 265px;
      text-align: start;
      font-size: 12px;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .text3 {
      width: 265px;
      height: 35px;
      margin-top: 2px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 16px;
        color: red;
      }
      .ask {
        display: block;
        width: 55px;
        height: 25px;
        font-size: 14px;
        line-height: 23px;
        font-weight: 600;
        color: #54a3ea;
        text-align: center;
        border: 1px solid #0478e8;
        border-radius: 15px;
      }
    }
  }
}
</style>
